<!--
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2025-03-18 09:40:22
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2025-04-03 21:15:37
 * @FilePath: \BusStopBoard.Webd:\360MoveData\Users\75041\Desktop\uniapp框架\my-project\src\pages\index\line.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="text">
        <view class="list">
            <view class="li-left">
                <view class="li-l-t">
                    <view class="li-l-t-t">{{ items.name }}</view>
                </view>
                <view class="firstflight">
                    <view>首班:
                        {{ formatTime(items.lineFristTime, 'HH:mm') }}
                    </view>
                    <view>末班:
                        {{ formatTime(items.lineLastTime, 'HH:mm') }}
                    </view>
                </view>
            </view>
            <view class="li-contain">
                <view class="li-c-top">
                    <view class="li-c-dirction">
                        {{ items.direction }}
                    </view>
                    <view class="li-right">
                        <view>{{ lastNaem }} </view>
                        <!-- <view>{{ lastZhan }} </view> -->
                    </view>
                </view>
                <view class="li-c-bottom">
                    <view class="arrow">
                        <view class="right-arrow"> </view>
                    </view>
                    <view class="line">
                    </view>
                    <view class="li-c-box">
                        <view v-if="data" class="boda">
                            <view v-for="(item, index) in data" :key="item.id" :class="[
                                'li-c-b-l',
                                {
                                    actives: item.pointId == items.pointId,
                                },
                            ]">
                                <!-- currents == index -->
                                <view class="gongBox" v-if="isVericel(index)">
                                    <image class="gongjiao" src="@/static/gongjiao.png">
                                    </image>
                                </view>
                                <view class="doc">
                                </view>
                                <view class="texts-box">
                                    <view class='texts'>
                                        {{ item.pointName }}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import swopers from '../index/modules/swiperLine.vue'
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import { mapGetters } from 'vuex';
dayjs.extend(customParseFormat);

export default {
    components: {
        swopers
    },
    props: {
        items: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            lastZhan: '等待发车',
            lastNaem: "等待发车",
            currents: undefined,
            broadTimeout: null,
            // 所有的报站的车辆数据
            verTicl: [],
            data: []
        };
    },
    computed: {
        lastPointName() {
            return this.items.lineNodeList?.slice(-1)[0]?.pointName || '未知站点';
        },
        ...mapGetters({
            // 假设Vuex store中有一个名为'myData'的状态
            myGetterData: 'getreceiveUserName',
        }),
        current() {
            const { pointId: pointId = '', lineNodeList: nodeList = [] } = this.items || {};

            // 空值快速返回
            if (!pointId || nodeList.length === 0) return -1;

            console.log(this.items, '我会死几个啊')
            // 精确查找逻辑
            return nodeList.findIndex((item) => item?.pointId === pointId);
        },
    },
    watch: {
        myGetterData(newVal) {
            // 当myGetterData变化时执行的逻辑
            console.log(newVal.lineIds.split(','), '我是阿达懒得')
            const dataName = newVal.message.split('|')
            const dataArray = newVal.lineIds.split(',')
            // 还剩余多少站
            const dataindexs = newVal.indexs.split(',')
            // 下标数据
            const datacurrentIndex = newVal.currentIndex.split(',')

            console.log(dataName, dataArray, dataindexs, datacurrentIndex, '我字了')
            // 方法2: 使用 for 循环
            const getIndexesFor = arr => {
                const indexes = [];
                for (let i = 0; i < arr.length; i++) {

                    if (arr[i] === this.items.code) {
                        const params = {
                            // 还剩余几站
                            // index: i,
                            // 报站的名称
                            name: dataName[i],
                            // 报站的索引
                            indexs: dataindexs[i],
                            lastCurrent: null
                        }

                        if (datacurrentIndex[i] != 0) {
                            params.lastCurrent = datacurrentIndex[i] - 1
                        }


                        console.log('我引来了嘛？？')
                        // const indexs = dataindexs[i]
                        // if (indexs == 0) {
                        //     params = inputString
                        //     params.index = undefined
                        //     return
                        // } else if (indexs == 1) {
                        //     this.lastNaem = '即将进站'
                        //     this.currents = this.current - 1
                        //     return
                        // } else {
                        //     this.lastNaem = '距本站' + indexs + '站'
                        // }
                        // console.log("距离本站" + indexs + "当前下标" + this.current)
                        // console.log(datacurrentIndex, '我是当前到站的下标数据')
                        // this.currents = currentIndex - 1
                        indexes.push(params);
                        // console.log(datacurrentIndex, i, '我是哪个位置的索引')

                    }
                }
                return indexes;
            };

            const dataArrayIndex = getIndexesFor(dataArray);
            console.log(dataArrayIndex, "我是数据啊啊啊啊")

            if (dataArrayIndex.length == 0) {
                return
            }

            this.start()

            dataArrayIndex.forEach(item => {
                if (item.lastCurrent != null) {
                    console.log(item.lastCurrent, '我嘿嘿一笑')
                    this.verTicl.push(item.lastCurrent)
                    this.data[item.lastCurrent].isverTicl = true

                }
            });

            const inputStr = this.findName(dataArrayIndex)

            // // 1. 转换数值并过滤非正数
            // const validStations = dataArrayIndex
            //     .map(item => ({ ...item, indexs: Number(item.indexs) }))
            //     .filter(item => item.indexs > 0);

            // // 2. 查找最小值（一行代码方案）
            // const minIndex = Math.min(...validStations.map(item => item.indexs));

            // // 3. 找到对应的完整对象
            // const minStation = validStations.find(item => item.indexs === minIndex);

            // // 输出结果
            // console.log("最小值:", minIndex);
            // console.log("对应数据:", minStation);

            // this.lastNaem = '距本站' + minStation.indexs + '站'

            console.log(inputStr, this.verTicl, dataArrayIndex, datacurrentIndex, '我是inputstc')

            if (inputStr == null) {
                return
            }
            if (inputStr && inputStr.indexs == 0) {
                this.lastNaem = inputStr.name
                // params.currents = undefined
                return
            } else if (inputStr.indexs == 1) {
                this.lastNaem = '即将进站'
                // params.currents = this.current - 1
                return
            } else {
                this.lastNaem = '距本站' + inputStr.indexs + '站'
            }

            console.log(inputStr, '我是出现的下标的位子老弟嘿嘿嘿')
            // 处理数据
            // const processData = (str) => {
            //     const entries = str.split('|');
            //     const result = {};

            //     entries.forEach(entry => {
            //         // 匹配格式如 "XXXX距本站YY站" 的条目（X=线路号，Y=距离）
            //         const match = entry.match(/(\d+)距本站(\d+)站/);
            //         console.log(match,'我是match啊老弟')
            //         if (match) {
            //             const line = match;   // 线路号
            //             const distance = parseInt(match, 10);  // 距离转为数字
            //             (result[line] || (result[line] = [])).push(distance);
            //         }
            //     });

            //     return result;
            // };

            // 调用函数并输出结果
            // console.log(processData(newVal.message), '我啊时间解答');

            // console.log(entries, '我啊时间解答')

            // console.log(newVal.lineIds.split(','), '我是阿达懒得')
            // const dataArray = newVal.lineIds.split(',')
            // const dataName = newVal.message.split('|')
            // // 距离几站
            // const dataindexs = newVal.indexs.split(',')
            // // 当前车辆下标
            // const datacurrentIndex = newVal.currentIndex.split(',')
            // const index = dataArray.indexOf(this.items.code);

            // console.log(dataName, '我是播报啊')
            // console.log(dataArray, this.items.code, this.items.name, '我来看看是否匹配了')
            // console.log(dataArray.indexOf(this.items.code), '我匹配不上???')

            // if (index !== -1) {
            //     const currentIndex = datacurrentIndex[index]
            //     const indexs = dataindexs[index]
            //     const inputString = dataName[index]
            //     if(this.broadTimeout){
            //         this.claerBroad()
            //     }
            //     this.start()
            //     if (indexs == 0) {
            //         this.lastNaem = inputString
            //         this.currents = undefined
            //         return
            //     } else if (indexs == 1) {
            //         this.lastNaem = '即将进站'
            //         this.currents = this.current-1
            //         return
            //     } else {
            //         this.lastNaem = '距本站' + indexs + '站'
            //     }
            //     console.log("距离本站" + indexs + "当前下标" + this.current)
            //     console.log(datacurrentIndex, '我是当前到站的下标数据')
            //     this.currents = currentIndex-1
            //     console.error('当前站点:', this.items.name, '当前站的索引', this.current, dataName, index, datacurrentIndex, '我是下标吗')

            // } else {
            //     console.log("未找到字符串");
            // }
            // console.log('myGetterData changed from', newVal);
        },
    },
    created() {
        this.data = this.items.lineNodeList.map((item) => {
            return {
                ...item,
                isverTicl: false
            }
        })
    },
    methods: {
        // 是否高亮显示车辆
        isVericel(index) {
            if (this.verTicl.includes(index)) {
                return true
            } else {
                return false
            }
        },
        claer() {
            for (let i = 0; i < this.verTicl.length; i++) {
                this.data[this.verTicl[i]].isverTicl = false
            }
            this.verTicl = []
        },
        //  开启定时器 2分钟后清掉
        start() {
            if (this.broadTimeout) {
                this.claer()
                this.claerBroad()
            }
            this.broadTimeout = setTimeout(() => {
                this.lastNaem = '等待发车'
                this.claer()
                this.claerBroad()
            }, 120000)
        },
        claerBroad() {
            clearTimeout(this.broadTimeout)
            this.broadTimeout = null
        },
        claerBoth() {
            for (let i = 0; i < this.verTicl.length; i++) {
                this.data[this.verTicl[i]].isverTicl = false
            }
            this.verTicl = []
            if (this.broadTimeout) {
                this.claerBroad()
            }
        },
        formatTime(time, format) {
            return dayjs(time, 'HH:mm').format(format);
        },
        findName(stations) {
            // 检查是否所有元素的 indexs 都为 0
            const allZero = stations.every(item => item.indexs == 0);
            if (allZero) {
                // 返回所有下标组成的数组
                return stations.find(item => item.indexs == 0);
            }

            // 提取非零的 indexs 并找到最小值
            const nonZeroValues = stations.map(item => item.indexs).filter(num => num != 0);
            const minNonZero = Math.min(...nonZeroValues);

            // 找到第一个出现最小非零值的下标
            const firstInd = stations.find(item => item.indexs == minNonZero);
            return firstInd;
        },
    },
};
</script>

<style lang="scss" scoped>
.text {
    width: 100%;
    // max-height: 155rpx;
    height: 215rpx;
    // max-height: 180rpx;
    overflow: hidden;
    margin-bottom: 2rpx;
    font-size: 30rpx;

    text-align: center;
    // background-image: linear-gradient(to bottom, #024ad0 45%, #0b138b 100%);
    background: #ffffff;
}

.list {
    display: flex;
    height: 100%;
    font-size: 18rpx;
    color: #fff;
    text-align: left;
}




.li-left {
    width: 100rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #68a1fb;

    .leaverName {
        font-size: 16rpx;
    }

    .firstflight {
        font-size: 18rpx;
    }

    .li-l-t {
        flex: 1;
        width: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        .li-l-t-t {
            font-size: 23rpx;
        }
    }

    .leavefor {
        color: red;
        font-size: 16rpx;
    }
}

.li-contain {
    flex: 1;

    .li-c-top {
        padding: 0rpx 12rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .li-c-dirction {
            padding: 0rpx 8rpx;
            height: 30rpx;
            background: #0f0f10;
            border-radius: 20rpx;
            line-height: 30rpx;
            color: #ffffff;
        }

        .li-right {
            // width: 120rpx;
            color: red;
            text-align: right;
        }
    }

    .li-c-bottom {
        position: relative;
        padding: 0rpx 12rpx;

        .arrow {
            width: 100%;
            left: 20px;
            right: 20px;
            margin-bottom: 14rpx;

            .right-arrow {
                position: relative;
                width: 100%;
                height: 20rpx;
                /* 增加高度以便更清楚地看到效果 */
                clip-path: polygon(0 40%, calc(100% - 44px) 30%, calc(100% - 44px) 0%, 100% 60%, calc(100% - 20px) 60%, 0 60%);
                /* 箭头颜色 */
                background: #68a1fb;
            }
        }

        .line {
            position: absolute;
            top: 36rpx;
            right: 14rpx;
            left: 14rpx;
            height: 4rpx;
            background-color: #68a1fb;
            border-radius: 4rpx;
        }


        .li-c-box {
            position: relative;



            .boda {
                display: flex;
                justify-content: space-between;
                margin-top: 8rpx;

                .li-c-b-l {

                    position: relative;
                    display: inline-flex;
                    height: 100%;
                    flex-direction: column;
                    align-items: center;

                    .gongBox {
                        position: absolute;
                        width: 20rpx;
                        height: 20rpx;
                        top: -20rpx;
                        left: -6rpx;

                        .gongjiao {
                            width: 20rpx;
                            height: 20rpx;
                        }
                    }

                    .doc {
                        margin: 0 auto;
                        position: relative;
                        width: 8rpx;
                        height: 8rpx;
                        background-color: #fff;
                        border-radius: 50%;
                        border: 2rpx solid #0f3c73;
                    }

                    .texts-box {
                        margin-top: 8rpx;
                        flex: 1;
                        overflow: hidden;

                        .texts {
                            width: 11rpx;
                            color: #0d0e0e;
                            font-size: 11rpx;
                            line-height: 11rpx;
                            // text-align: justify;
                            text-align: justify;
                            writing-mode: vertical-rl;
                            text-orientation: upright;
                            writing-mode: vertical-rl;
                            text-orientation: upright;
                            white-space: nowrap;
                        }
                    }
                }

                .actives {
                    .doc {
                        border: 2rpx solid red;
                        background-color: red;
                    }

                    .texts-box {
                        .texts {
                            background: #e0272d;
                            color: #ffffff;
                            background: #e0272d;
                            border-radius: 8rpx;
                            padding: 6rpx 0rpx;
                        }
                    }

                }
            }
        }
    }
}


.li-left,
.li-right {

    // width: 140rpx;
    padding: 6rpx 4rpx;
    text-align: center;
    // background-color: #ffae00;
}



.li-center {
    position: relative;
    flex: 1;
    padding: 0 12rpx;
    overflow: hidden;
}
</style>